<template>
  <div class="app-container">
    <a-title @clickPreview="preview" />
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="100px">
      <el-form-item label="项目负责人" prop="projectLeader" style="display:none">
        <el-input
          v-model="queryParams.projectLeader"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="min-width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目名称" prop="name">
        <el-input
          v-model="queryParams.name"
          placeholder="请输入项目名称"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目代码" prop="code">
        <el-input
          v-model="queryParams.code"
          placeholder="请输入项目代码"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
       <el-form-item label="业务类别" prop="businessTypeNames">
        <el-cascader
          v-model="queryParams.businessTypeNames"
          :options="categoryOptions"
          :show-all-levels="false"
          :props="{ value: 'id',emitPath:false }"
          filterable
          clearable
          style="width: 240px"
          placeholder="请选择业务类别"
        />
      </el-form-item>
      <el-form-item label="开始服务日期" prop="startDate">
        <el-date-picker
          v-model="dateRange"
          clearable
          size="small"
          style="width: 240px"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        />
      </el-form-item>
      <el-form-item label="委托单位" prop="party">
        <el-input
          v-model="queryParams.party"
          placeholder="请输入委托单位"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目经理" prop="projectManagerName">
        <el-input
          v-model="queryParams.projectManagerName"
          placeholder="请输入项目经理"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="项目进展" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择项目进展"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="结项状态" prop="closureSituation">
         <el-input
          v-model="queryParams.closureSituation"
          placeholder="请输入结项状态"
          clearable
          size="small"
          style="width: 240px"
          @input="change($event)"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="是否启用" prop="enableFlag">
        <el-select
          v-model="queryParams.enableFlag"
          placeholder="请选择是否启用"
          clearable
          size="small"
          style="width: 240px"
        >
          <el-option
            v-for="dict in yesNoOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="button"
          class="el-button el-button--primary el-button--mini"
          icon="el-icon-refresh-right"
          size="mini"
          @click="handleSynchronize"
        >同步</el-button>
      </el-col>
    </el-row>

    <el-table
      stripe
      v-loading="loading"
      :data="projectList"
      :default-sort="{prop: 'enableFlag', order: 'ascending'}"
      @selection-change="handleSelectionChange"
      @sort-change="tableSortChange"
    >
      <el-table-column
        type="selection"
        width="55"
        align="center"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="项目名称"
        align="left"
        prop="name"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        min-width="230"
      />
      <el-table-column
        label="项目代码"
        align="center"
        prop="code"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="所含业务类别"
        align="center"
        prop="businessTypeNames"
      />
      <el-table-column
        label="项目进展"
        align="center"
        prop="status"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="140"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.statusType" disable-transitions>{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="结项状态"
        align="center"
        prop="closureSituation"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
      </el-table-column>
      <el-table-column
        label="开始服务日期"
        align="center"
        prop="startDate"
        width="140"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      >
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.startDate, '{y}-{m}-{d} ') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="项目执行部门"
        align="left"
        prop="executeDept"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="130"
      />
      <el-table-column
        label="委托单位"
        align="left"
        prop="party"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
      />
      <el-table-column
        label="项目经理"
        align="center"
        prop="projectManagerName"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="100"
      />
      <el-table-column
        label="是否启用"
        align="center"
        prop="enableFlag"
        :sort-orders="['ascending', 'descending']"
        sortable="custom"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag
            :type="scope.row.enableFlag === '启用' ? 'success' : 'warning'"
            disable-transitions
          >{{ scope.row.enableFlag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="160">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.enableFlag=='启用'&&scope.row.isvalid!='0'"
            size="mini"
            type="text"
            icon="el-icon-user"
            @click="memberLink(scope.row)"
          >项目成员</el-button>
          <el-button
            v-if="scope.row.enableFlag=='启用'&&scope.row.isvalid!='0'&&isProjectLeader"
            size="mini"
            type="text"
            icon="el-icon-office-building"
            @click="handleView(scope.$index, scope.row)"
          >项目主页</el-button>
          <el-button
            v-if="scope.row.enableFlag=='未启用'"
            size="mini"
            type="text"
            icon="el-icon-open"
            @click="handleUpdate(scope.row)"
          >项目启用</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 项目启用对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px">
      <el-form ref="form" :model="form" :rules="enableRules" label-width="120px">
        <el-form-item label="项目名称" prop="name">
          <el-input v-model="form.name" type="textarea" placeholder="请输入内容" disabled />
        </el-form-item>
        <el-form-item label="项目进展" prop="status">
          <el-select v-model="form.status" placeholder="请选择项目进展" size="small" style="width:100%">
            <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
              :disabled="dict.dictValue==='6'?true:false"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开始服务日期" prop="startDate">
          <el-date-picker
            v-model="form.startDate"
            size="small"
            style="width:100%"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="选择开始服务日期"
          />
        </el-form-item>
        <el-form-item label="所在地区" prop="areas">
          <el-cascader
            v-model="form.areas"
            :options="areaOptions"
            filterable
            :props="{ value: 'id',checkStrictly: true }"
            style="width:100%"
            @change="getLastNodes"
          />
        </el-form-item>
        <el-form-item label="项目执行部门" prop="executeDept">
          <el-input v-model="form.executeDept" placeholder="请输入项目执行部门" disabled />
        </el-form-item>
        <el-form-item label="委托单位" prop="party">
          <el-input v-model="form.party" placeholder="请输入委托单位" disabled />
        </el-form-item>
        <!-- <el-form-item label="项目经理" prop="projectManagerName">
          <el-input v-model="form.projectManagerName" placeholder="请输入项目经理 " disabled />
        </el-form-item>-->
        <el-form-item label="是否启用" prop="enableFlag" style="display:none">
          <el-input v-model="form.enableFlag" placeholder="请输入是否启用 " disabled />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">启 用</el-button>
      </div>
    </el-dialog>

    <!-- 项目成员列表对话框 -->
    <el-dialog :title="title" :visible.sync="openList" width="1300px">
      <el-form ref="queryForm" :model="queryParamsMember" :inline="true" label-width="68px">
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="queryParamsMember.nickName"
            placeholder="请输入姓名"
            clearable
            size="small"
            style="width:240px;"
            @keyup.enter.native="handleQueryMemberList"
          />
        </el-form-item>
        <el-form-item label="手机号码" prop="phonenumber">
          <el-input
            v-model="queryParamsMember.phonenumber"
            placeholder="请输入手机号码"
            clearable
            size="small"
            style="width:240px;"
            @keyup.enter.native="handleQueryMemberList"
          />
        </el-form-item>
        <el-form-item label="角色" prop="role">
          <el-select
            v-model="queryParamsMember.role"
            placeholder="请选择角色"
            clearable
            size="small"
            style="width:240px;"
          >
            <el-option
              v-for="dict in roleOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQueryMemberList"
          >查询</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQueryMemberList">重置</el-button>
        </el-form-item>
      </el-form>

      <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-delete"
            size="mini"
            :disabled="multiple"
            @click="handleDelete"
          >移除</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-refresh"
            size="mini"
            @click="handleHistory"
          >成员历史变更记录</el-button>
        </el-col>
      </el-row>

      <el-table
        v-loading="loading"
        :data="memberList"
        :default-sort="{prop: 'joinTime', order: 'descending'}"
        @selection-change="handleSelectionChangeMemberList"
        @sort-change="tableSortChangeMemberList"
      >
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="角色"
          align="center"
          prop="role"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="用户状态"
          align="center"
          prop="status"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <el-tag
              v-if="scope.row.status=='正常'"
              type="success"
              disable-transitions
            >{{scope.row.status}}</el-tag>
            <el-tag
              v-if="scope.row.status=='未启用'"
              type="warning"
              disable-transitions
            >{{scope.row.status}}</el-tag>
            <el-tag
              v-if="scope.row.status=='停用'"
              type="danger"
              disable-transitions
            >{{scope.row.status}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="进行中项目" align="center" prop="projectName" />
        <!-- <el-table-column
          label="邮箱"
          align="center"
          prop="email"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />-->
        <el-table-column
          label="参与时间"
          align="center"
          prop="joinTime"
          width="180"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.joinTime, '{y}-{m}-{d} ') }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="工作内容"
          align="center"
          prop="workContent"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <!-- <el-table-column
          label="工作量(%)"
          align="center"
          prop="workload"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />-->
        <el-table-column
          label="备注"
          align="center"
          prop="remark"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdateMember(scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="totalMember>0"
        :total="totalMember"
        :page.sync="queryParamsMember.pageNum"
        :limit.sync="queryParamsMember.pageSize"
        @pagination="getMemberList"
      />
    </el-dialog>

    <!-- 添加项目成员对话框 -->
    <el-dialog :title="title" :visible.sync="openAdd" width="900px">
      <el-form ref="form" :model="queryAddParams" :rules="rules" :inline="true" label-width="80px">
        <el-form-item label="项目名称" prop="projectName">
          <div class="content" style="width:300px;">{{ queryAddParams.projectName }}</div>
          <!--<el-input v-model="queryAddParams.projectName" placeholder="请输入项目名称" style="width:300px;" disabled />-->
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="queryAddParams.nickName" placeholder="请输入姓名" style="width:240px;"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleAddQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table
        v-loading="loading"
        ref="table"
        :data="memberAddList"
        :default-sort="{prop: 'status', order: 'ascending'}"
        @selection-change="handleSelectionChangeMember"
        @sort-change="tableSortChangeAddList"
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="员工编号"
          align="center"
          prop="jobNo"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="用户状态"
          align="center"
          prop="status"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.status=='0'">
              <el-tag type="success">正常</el-tag>
            </span>
            <span v-else-if="scope.row.status=='1'">
              <el-tag type="danger">停用</el-tag>
            </span>
            <span v-else>
              <el-tag type="warning">未启用</el-tag>
            </span>
          </template>
        </el-table-column>
        <el-table-column label="进行中的项目" align="center" prop="projectName" />
        <el-table-column label="设置为项目经理" align="center">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.role"
              active-value="0"
              inactive-value="1"
              @change="handleStatusChange(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalAddMember>0"
        :total="totalAddMember"
        :page.sync="queryAddParams.pageNum"
        :limit.sync="queryAddParams.pageSize"
        @pagination="getAddList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="openAdd = false;openList = true;title = '项目成员'">取 消</el-button>
        <el-button type="primary" :disabled="multiple||canClick" @click="submitBatchMember">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 编辑项目成员对话框 -->
    <el-dialog :title="title" :visible.sync="openEdit" width="500px">
      <el-form ref="formEdit" :rules="rules" :inline="false" label-width="80px">
        <el-form-item label="姓名" prop="nickName">
          <!--<el-input v-model="formEdit.nickName" placeholder="请输入姓名" disabled />-->
          <div class="content">{{ formEdit.nickName }}</div>
        </el-form-item>
        <el-form-item label="项目名称" prop="projectName">
          <div class="content">{{ formEdit.projectName }}</div>
          <!--<el-input v-model="formEdit.projectName" placeholder="请输入项目名称" disabled />-->
        </el-form-item>
        <el-form-item label="项目角色" prop="role">
          <el-radio-group v-model="formEdit.role" @change="roleChange">
            <el-radio label="0">项目经理</el-radio>
            <el-radio label="1">项目成员</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="工作内容" prop="workContent">
          <el-input v-model="formEdit.workContent" type="textarea" placeholder="请输入工作内容" />
        </el-form-item>
        <!-- <el-form-item label="工作量(%)" prop="workload">
          <el-input-number
            v-model="formEdit.workload"
            placeholder="请输入工作量"
            :min="0"
            style="width:100%"
          />
        </el-form-item>-->
        <el-form-item label="备注" prop="remark">
          <el-input v-model="formEdit.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openEdit = false;openList = true;title = '项目成员'">取 消</el-button>
        <el-button type="primary" @click="submitFormMember">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 历史成员变更记录对话框 -->
    <el-dialog :title="title" :visible.sync="openHistory" width="900px">
      <el-form
        ref="queryHistoryForm"
        :model="queryHistoryParams"
        :inline="true"
        label-width="68px"
        @submit.native.prevent
      >
        <el-form-item label="姓名" prop="nickName">
          <el-input
            v-model="queryHistoryParams.nickName"
            placeholder="请输入姓名"
            clearable
            size="small"
            @keyup.enter.native="handleHistoryQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleHistoryQuery">查询</el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-loading="loading"
        :data="memberHistoryList"
        :default-sort="{prop: 'createTime', order: 'descending'}"
        @selection-change="handleSelectionChange"
        @sort-change="tableSortChangeHistoryList"
      >
        <el-table-column
          label="员工编号"
          align="center"
          prop="jobNo"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="姓名"
          align="center"
          prop="nickName"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="手机号码"
          align="center"
          prop="phonenumber"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="角色"
          align="center"
          prop="role"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
        <el-table-column
          label="变更时间"
          align="center"
          prop="createTime"
          width="180"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d} {h}:{i}') }}</span>
          </template>
        </el-table-column>
        <!--<el-table-column label="工作内容" align="center" prop="workContent" />
        <el-table-column label="工作量" align="center" prop="workload" />-->
        <el-table-column
          label="变更内容"
          align="center"
          prop="remark"
          :sort-orders="['ascending', 'descending']"
          sortable="custom"
        />
      </el-table>
      <pagination
        v-show="totalHistory>0"
        :total="totalHistory"
        :page.sync="queryHistoryParams.pageNum"
        :limit.sync="queryHistoryParams.pageSize"
        @pagination="getHistoryList"
      />
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="openPreview" width="80%">
      <iframe :src="manualPreviewUrl" frameborder="0" width="100%" height="700px"></iframe>
    </el-dialog>
  </div>
</template>

<script>
import {
  listProject,
  getProject,
  delProject,
  addProject,
  updateProject,
  exportProject,
  synchronizeProject,
  isProjectLeader
} from '@/api/projectleader/projectGlance';
import {
  listMember,
  addListMember,
  getMember,
  delMember,
  addMember,
  updateMember,
  exportMember,
  listMemberHistory,
  addHistory
} from '@/api/projectWorkbench/projectList/member';
import { provinceCity, provinceCityTree } from '@/api/provinceCity';
import { getInfo } from '@/api/login';
import aTitle from '@/components/Title';
import { treeselect } from '@/api/system/business_category';
import { mapGetters } from 'vuex';
export default {
  name: 'Project',
  components: { aTitle },
  data () {
    return {
      manualPreviewUrl: null,
      openPreview: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      nickNames: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      categoryOptions: [],
      // 总条数
      total: 0,
      // 总条数
      totalHistory: 0,
      // 总条数
      totalMember: 0,
      // 总条数
      totalAddMember: 0,
      // 项目成员表格数据
      memberList: [],
      memberAddList: [],
      // 历史成员变更记录列表数据
      memberHistoryList: [],
      // 项目表格数据
      projectList: [],
      // 日期范围
      dateRange: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      openEdit: false,
      openAdd: false,
      openList: false,
      // 是否显示成员历史弹出层
      openHistory: false,
      // 查询参数
      queryParamsMember: {
        pageNum: 1,
        pageSize: 10,
        projectId: undefined,
        userId: undefined,
        role: undefined,
        joinTime: undefined,
        workContent: undefined,
        workload: undefined,
        nickName: undefined
      },
      // 查询参数
      queryAddParams: {
        pageNum: 1,
        pageSize: 20,
        nickName: undefined,
        projectName: undefined
      },
      // 历史成员变更记录查询参数
      queryHistoryParams: {
        pageNum: 1,
        pageSize: 20
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        code: undefined,
        name: undefined,
        status: undefined,
        startDate: undefined,
        executeDept: undefined,
        party: undefined,
        projectLeader: undefined,
        projectManager: undefined,
        buildUnit: undefined,
        province: undefined,
        city: undefined,
        area: undefined,
        address: undefined,
        composition: undefined,
        servicePeriod: undefined,
        content: undefined,
        extend1: undefined,
        extend2: undefined,
        extend3: undefined,
        extend4: undefined,
        extend5: undefined,
        isvalid: undefined,
        projectCompany: undefined,
        projectLeaderNo: undefined,
        enableFlag: undefined,
        endDate: undefined,
        investment: undefined,
        constructionCost: undefined,
        honors: undefined,
        businessTypeNames: undefined
      },
      // 表单参数
      form: {},
      formEdit: {},
      // 表单校验
      rules: {
        code: [
          { required: true, message: '项目代码不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '项目名称不能为空', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '项目进展不能为空', trigger: 'blur' }
        ]
      },
      enableRules: {
        status: [
          { required: true, message: '项目进展不能为空', trigger: 'blur' }
        ],
        startDate: [
          { required: true, message: '开始服务日期不能为空', trigger: 'blur' }
        ],
        areas: [
          { required: true, message: '所在地区不能为空', trigger: 'blur' }
        ],
      },
      // 项目状态数据字典
      statusOptions: [],
      // 是否启用数据字典
      yesNoOptions: [],

      projectRoutes: [],
      // 角色数据字典
      roleOptions: [],
      multipleSelection: [],
      areaOptions: [],
      isProjectLeader: false,
      canClick: false,
    }
  },
  computed: {
    ...mapGetters(['permission_routes'])
  },
  created () {
    this.getList()
    treeselect().then(res => {
      if (res.code === 200) {
        this.categoryOptions = res.data
      }
    })
    console.log(this.$route.params.id)
    this.queryParams.projectLeader = this.$route.params.id
    //是否为项目负责人
    isProjectLeader({leader: this.$route.params.id}).then(res => {
      if (res.code === 200) {
        this.isProjectLeader = res.isProjectLeader;
      }
    });
    //项目状态
    this.getDicts('sys_project_status').then(response => {
      this.statusOptions = response.data
    })
    //是否启用
    this.getDicts('sys_project_enable').then(response => {
      this.yesNoOptions = response.data
    })
    //项目角色
    this.getDicts('sys_project_role').then(response => {
      this.roleOptions = response.data
    })
  },
  methods: {
    preview () {
      this.openPreview = true;
      this.manualPreviewUrl = `${this.previewUrl}${encodeURIComponent(
        `${this.operationManual}项目负责人工作台/业务系统操作说明-项目负责人工作台-项目清单管理.xlsx`
      )}&name=${encodeURIComponent("业务系统操作说明-项目负责人工作台-项目清单管理.xlsx")}`;
    },
    /** 查询项目列表 */
    getList () {
      this.loading = true
      listProject(this.addDateRange(this.queryParams, this.dateRange)).then(
        response => {
          this.projectList = response.rows.map(item => {
            item.enableFlag = item.enableFlag === '0' ? '启用' : '未启用';
            if (item.isvalid === '0') {
              item.status = '作废';
              item.statusType = 'danger';
            } else {
              if (item.status === '0') {
                item.status = '筹备';
                item.statusType = '';
              } else if (item.status === '1') {
                item.status = '进行中';
                item.statusType = 'info';
              } else if (item.status === '2') {
                item.status = '成果交付';
                item.statusType = 'success';
              } else if (item.status === '3') {
                item.status = '项目完成';
                item.statusType = 'success';
              } else if (item.status === '4') {
                item.status = '项目暂停';
                item.statusType = 'danger';
              } else if (item.status === '5') {
                item.status = '项目终止';
                item.statusType = 'warning';
              } else if (item.status === '6') {
                item.status = '项目作废';
                item.statusType = 'danger';
              }
            }
            return item
          })
          this.total = response.total
          this.loading = false
        }
      )
    },
    /** 查询项目成员列表 */
    getMemberList () {
      this.loading = true
      //this.queryParamsMember.projectId = this.$route.params.id;
      listMember(this.queryParamsMember).then(response => {
        this.memberList = response.rows.map(item => {
          item.role = item.role === '0' ? '项目经理' : '项目成员';
          item.workload = item.workload == null ? '' : item.workload;
          if (item.status === "0") {
            item.status = "正常";
          } else if (item.status === "1") {
            item.status = "停用";
          } else if (item.status === "2") {
            item.status = "未启用";
          }
          return item
        })
        this.totalMember = response.total
        this.loading = false
      })
    },
    /** 查询项目成员添加列表 */
    getAddList () {
      this.loading = true
      // this.queryAddParams.projectId = this.$route.params.id;
      this.queryAddParams.projectId = this.queryParamsMember.projectId
      getProject(this.queryAddParams.projectId).then(response => {
        this.queryAddParams.projectName = response.data.name
      })
      addListMember(this.queryAddParams).then(response => {
        this.memberAddList = response.rows
        this.totalAddMember = response.total
        this.loading = false
      })
    },
    /** 查询历史成员变更记录列表 */
    getHistoryList () {
      this.loading = true
      this.queryHistoryParams.projectId = this.queryParamsMember.projectId
      listMemberHistory(this.queryHistoryParams).then(response => {
        this.memberHistoryList = response.rows.map(item => {
          item.role = item.role === '0' ? '项目经理' : '项目成员';
          // item.workload = item.workload == null ? "" : item.workload + "%";
          return item
        })
        this.totalHistory = response.total
        this.loading = false
      })
    },
    /** memberLink (row) {
       this.projectRoutes = []
       this.permission_routes.forEach(item => {
         if (item.name === "ProjectList") {
           this.projectRoutes = item.children[2]
         }
       })
       this.projectRoutes.name = this.projectRoutes.name.replace('/:id', '')
       this.projectRoutes.path = "projectList/" + this.projectRoutes.name.replace(this.projectRoutes.name[0], this.projectRoutes.name[0].toLowerCase()) + '/' + row.guid
       sessionStorage.removeItem('menuTitle')
       sessionStorage.removeItem('projectRoutes')
       sessionStorage.setItem('menuTitle', row.name)
       sessionStorage.setItem('projectRoutes', JSON.stringify([this.projectRoutes]))
       let routeData = this.$router.resolve({
         path: `/projectList/member/${row.guid}`,
       });
       window.open(routeData.href, '_blank');
     }, */
    memberLink (row) {
      this.openList = true
      this.title = '项目成员列表';
      this.queryParamsMember.projectId = row.guid
      this.getMemberList()
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        id: undefined,
        globalId: undefined,
        code: undefined,
        name: undefined,
        status: '0',
        startDate: undefined,
        executeDept: undefined,
        party: undefined,
        projectLeader: undefined,
        projectManager: undefined,
        buildUnit: undefined,
        province: undefined,
        city: undefined,
        area: undefined,
        address: undefined,
        composition: undefined,
        servicePeriod: undefined,
        content: undefined,
        remark: undefined,
        extend1: undefined,
        extend2: undefined,
        extend3: undefined,
        extend4: undefined,
        extend5: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        isvalid: undefined,
        projectCompany: undefined,
        projectLeaderNo: undefined,
        enableFlag: undefined,
        endDate: undefined,
        investment: undefined,
        constructionCost: undefined,
        honors: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 项目成员列表搜索按钮操作 */
    handleQueryMemberList () {
      this.queryParamsMember.pageNum = 1
      this.getMemberList()
    },
    /** 搜索按钮操作 */
    handleAddQuery () {
      this.queryParams.pageNum = 1
      this.getAddList()
    },
    /** 搜索按钮操作 */
    handleHistoryQuery () {
      this.queryHistoryParams.pageNum = 1
      this.getHistoryList()
    },
    // 表单重置
    resetHistory () {
      this.queryHistoryForm = {
        nickName: undefined
      }
      this.resetForm('queryHistoryForm')
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 项目成员列表重置按钮操作 */
    resetQueryMemberList () {
      this.resetForm('queryForm')
      this.handleQueryMemberList()
    },
    // 多选框选中数据
    handleSelectionChange (selection) {
      this.ids = selection.map(item => item.guid)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    // 多选框选中数据
    handleSelectionChangeMember (selection) {
      this.ids = selection.map(item => item.guid)
      this.single = selection.length != 1
      this.multiple = !selection.length
      this.multipleSelection = selection
    },
    // 多选框选中数据
    handleSelectionChangeMemberList (selection) {
      this.ids = selection.map(item => item.guid)
      this.nickNames = selection.map(item => item.nickName)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd () {
      this.reset()
      this.openAdd = true
      // this.openList = false
      this.title = '添加项目成员';
      this.getAddList()
      this.canClick = false;
    },
    /** 修改按钮操作 */
    handleUpdate (row) {
      this.reset()
      const id = row.guid || this.ids
      getProject(id).then(response => {
        this.form = response.data
        this.form.enableFlag = '0';
        this.open = true
        this.title = '项目启用';
      })
      //省市区加载
      provinceCityTree().then(res => {
        if (res.code === 200) {
          this.areaOptions = res.data
        }
      })
    },
    /** 历史成员变更记录 */
    handleHistory () {
      this.resetHistory()
      this.openHistory = true
      // this.openList = false
      this.title = '历史成员变更记录';
      this.getHistoryList()
    },
    /** 修改按钮操作 */
    handleUpdateMember (row) {
      this.reset()
      const id = row.guid || this.ids
      getMember(id).then(response => {
        this.formEdit = response.data
        // this.openList = false
        this.openEdit = true
        this.title = '编辑项目成员';
      })
    },
    /** 批量添加项目成员*/
    submitBatchMember () {
      this.canClick = true;
      this.multipleSelection.map(item => {
        //  item.projectId = this.$route.params.id;
        item.projectId = this.queryParamsMember.projectId
        addMember(item).then(response => {
          if (response.code === 200) {
            this.msgSuccess('新增成功')
            this.openAdd = false
            this.openList = true
            this.getMemberList()
            this.getList()
          } else {
            this.msgError(response.msg)
          }
          this.canClick = false;
        })
      })
    },
    /** 提交按钮 */
    submitFormMember: function () {
      if (this.formEdit.guid != undefined) {
        updateMember(this.formEdit).then(response => {
          if (response.code === 200) {
            this.msgSuccess('修改成功')
            this.openEdit = false
            this.openList = true
            this.getMemberList()
            this.getList()
            // this.handleAddHistory("修改项目：" + this.queryAddParams.projectName);
          } else {
            this.msgError(response.msg)
          }
        })
      }
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.guid != undefined) {
            updateProject(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('修改成功')
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          } else {
            addProject(this.form).then(response => {
              if (response.code === 200) {
                this.msgSuccess('新增成功')
                this.open = false
                this.getList()
              } else {
                this.msgError(response.msg)
              }
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      const ids = row.guid || this.ids
      const nickNames = row.nickName || this.nickNames
      this.$confirm('是否确认移除项目成员"' + nickNames + '"?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          return delMember(ids, "prjectList")
        })
        .then(() => {
          this.getMemberList()
          this.msgSuccess('移除成功')
          this.getList()
          // this.handleAddHistory("删除项目：" + this.queryAddParams.projectName);
        })
        .catch(function () { })
    },
    /** 同步按钮操作 */
    handleSynchronize () {
      let vm = this;
      const userGuid = this.$route.params.id
      this.$confirm('是否确认从经营系统同步未加入的项目和项目合同信息?', '确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(function () {
          vm.$loading({ lock: true, text: '同步中', background: 'rgba(0, 0, 0, 0.7)', spinner: 'el-icon-loading', })
          return synchronizeProject(userGuid)
        })
        .then(res => {
          if (res.code === 200) {
            this.msgSuccess("同步成功");
            this.getList()
            vm.$loading({ lock: true, text: '同步中', background: 'rgba(0, 0, 0, 0.7)', spinner: 'el-icon-loading', }).close();
          }
        })
        .catch(function () { })
    },
    handleStatusChange (row) {
      if (row.role == '0') {
        this.$alert(
          '设置为项目经理："' + row.nickName + '"将替换当前项目经理',
          '提示',
          {
            confirmButtonText: '确定',
            type: 'info'
          }
        )
        this.$refs.table.toggleRowSelection(row, true)
      } else {
        this.$refs.table.toggleRowSelection(row, false)
      }
    },
    tableSortChange (column) {
      this.queryParams.pageNum = 1
      if (column.order === 'descending') {
        this.queryParams.sortBy = column.prop
        this.queryParams.order = 'desc';
      } else {
        this.queryParams.sortBy = column.prop
        this.queryParams.order = 'asc';
      }
      this.getList()
    },
    tableSortChangeMemberList (column) {
      this.queryParamsMember.pageNum = 1
      if (column.order === 'descending') {
        this.queryParamsMember.sortBy = column.prop
        this.queryParamsMember.order = 'desc';
      } else {
        this.queryParamsMember.sortBy = column.prop
        this.queryParamsMember.order = 'asc';
      }
      this.getMemberList()
    },
    tableSortChangeAddList (column) {
      this.queryAddParams.pageNum = 1
      if (column.order === 'descending') {
        this.queryAddParams.sortBy = column.prop
        this.queryAddParams.order = 'desc';
      } else {
        this.queryAddParams.sortBy = column.prop
        this.queryAddParams.order = 'asc';
      }
      this.getAddList()
    },
    tableSortChangeHistoryList (column) {
      this.queryHistoryParams.pageNum = 1
      if (column.order === 'descending') {
        this.queryHistoryParams.sortBy = column.prop
        this.queryHistoryParams.order = 'desc';
      } else {
        this.queryHistoryParams.sortBy = column.prop
        this.queryHistoryParams.order = 'asc';
      }
      this.getHistoryList()
    },
    roleChange (value) {
      if (value == '0') {
        this.$alert(
          '设置当前用户为项目经理，原项目经理将设置为项目成员',
          '提示',
          {
            confirmButtonText: '确定',
            type: 'info'
          }
        )
      }
    },
    getLastNodes (val) {
      if(val){
        this.form.area = val[0] + ',' + val[1] + ',' + val[2]
      }
    },change(e) {
      this.$forceUpdate();
    },
    handleView (index, row) {
      this.permission_routes.forEach(item => {
        if (item.name === 'ProjectList') {
          this.projectRoutes = item.children
        }
      })
      this.projectRoutes.map(item => {
        if (item.children) {
          item.children.map(obj => {
            obj.name = obj.name.replace('/:id', '')
            obj.path =
              obj.name.replace(item.name[0], item.name[0].toLowerCase()) +
              '/' +
              row.guid
          })
        } else {
          item.name = item.name.replace('/:id', '')
          item.path =
            item.name.replace(item.name[0], item.name[0].toLowerCase()) +
            '/' +
            row.guid
        }
      })

      console.log(this.projectRoutes)
      sessionStorage.setItem('menuTitle', row.name)
      sessionStorage.setItem('isvalid', row.isvalid)
      sessionStorage.setItem(
        'projectRoutes',
        JSON.stringify(this.projectRoutes)
      )
      let routeData = this.$router.resolve({
        path: `/projectList/projectGeneral/${row.guid}`
      })
      var win = window.open(routeData.href, '_blank');
       win.document.title =  "hello";
    
    },
  }
}
</script>
<style lang="scss" scoped>
.content {
  font-size: 14px;
  word-break: break-word;
  margin-top: 9px;
  line-height: 1.15;
}
</style>
